<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width"/>
    <title>采购订单</title>
    <link href="/css/bootstrap.min.css" rel="stylesheet" />
    <link href="/layui/css/layui.css" rel="stylesheet"/>
</head>
<body>
    <div class="layui-fluid">
        <script type="text/html" id="toolbarDemo">
            <div class="layui-btn-container">
                <button type="button" id="btnAdd" class="layui-btn layui-btn-normal layui-btn-sm">
                    <i class="layui-icon">&#xe608;</i> 添加
                </button>
            </div>
        </script>
        <div class="layui-col-md12">
            <table class="layui-hide" id="grid" lay-filter="grid"></table>
        </div>
    </div>
<!-- Required Javascript -->
<script src="/js/vue.min.js"></script>
<script src="/js/jquery-3.3.1.min.js"></script>
<script src="/js/jquery.validate.min.js"></script>
<script src="/layui/layui.all.js"></script>
<script src="/layui/extend/tableSelect.js"></script>

<script type="text/html" id="barDemo">
    <button type="button" class="layui-btn layui-btn-normal layui-btn-xs" lay-event="edit"><i class="layui-icon">&#xe642;</i>编辑</button>
    <button type="button"  class="layui-btn layui-btn-warm layui-btn-xs" lay-event="detail"><i class="layui-icon">&#xe60a;</i>明細</button>
    <button type="button"  class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del"><i class="layui-icon">&#xe640;</i>删除</button>
</script>

<script>
    var data=${data};
    // console.log(data);
</script>

<script>
    console.log(data);
    var table = layui.table;
    table.render({
        elem: '#grid'
        , data:data
        , cellMinWidth: 80 //全局定义常规单元格的最小宽度，layui 2.2.1 新增
        , height: 'full-20' //高度最大化减去差值
        , width: 'full-20'
        , cols: [[
            {checkbox: true}
            , {field: 'iID', width: 80, title: 'ID', sort: true}
            , {field: 'cVouchCode', width: 120, title: '单据编码', sort: true}
            , {field:'dDate',width: 120,title: '日期',sort: true}
            , {field:'cVenName',width: 140,title: '供应商',sort: true, templet:'<div>{{d.vendorDTO.cVenName}}</div>'}
            , {field:'cDepName',width: 140,title: '部门',sort: true, templet:'<div>{{d.departmentDTO.cDepName}}</div>'}
            , {field:'cPersonName',width: 140,title: '人员',sort: true, templet:'<div>{{d.personDTO.cPersonName}}</div>'}
            , {field:'bRedVouch',width: 120,title: '单据类型',sort: true, templet:'<div>{{# if (d.bRedVouch==1) { }} 红字 {{# } else { }} 蓝字 {{# } }}</div>'}
            , {field:'cMaker',width: 120,title: '制单人',sort: true}
            , {field:'dMakeDate',width: 120,title: '制单日期',sort: true}
            ,{fixed: 'right', width: 220, align:'center', toolbar: '#barDemo'}
        ]]
        , id: 'grid'
        , page: false
        , limit: 10
        // , method: 'post'  //提交方式
        , toolbar: '#toolbarDemo' //开启头部工具栏，并为其绑定左侧模板
        , defaultToolbar: ['filter', 'exports', 'print'] //自定义头部工具栏右侧图标。如无需自定义，去除该参数即可
    });
</script>

<script>
    //新增按钮
    $('#btnAdd').on('click', function (e) {
        //弹出一个iframe层
        perContent=layer.open({
            type: 2,
            id: "PuOrderCreate",
            title: '新增采购订单',
            maxmin: true,
            shadeClose: true, //点击遮罩关闭层
            area: ['100%', '100%'],
            content: '/puorder/create',
            end: function () {
                // table.reload('grid', {
                // });
            }
        });
        //layer.full(perContent);
    });

    $('#btnEdit').on('click', function (e) {
        if ($('#btnEdit').hasClass("layui-btn-disabled"))
        {
            return;
        }

        $("#btnAdd").addClass("layui-btn-disabled");
        $("#btnEdit").addClass("layui-btn-disabled");
        $("#btnDel").addClass("layui-btn-disabled");
        $("#btnSave").removeClass("layui-btn-disabled");
        $("#btnCancel").removeClass("layui-btn-disabled");
        $("#btnAddRow").removeClass("layui-btn-disabled");
        $("#btnDelRow").removeClass("layui-btn-disabled");

        $.get("/puorder/get", { id: data.iID },
            function(data){
                alert("Data Loaded: " + data);
            });
        // layer.open({
        //     type: 2,
        //     id: "WarehouseEdit",
        //     title: '修改仓库',
        //     maxmin: true,
        //     shadeClose: true, //点击遮罩关闭
        //     area: ['800px', '520px'],
        //     content: '/puorder/get?id='+data.iID,
        //     end: function () {
        //         table.reload('detailGrid', {});
        //     }
        // });
    });

    $('#btnDel').on('click', function () {
        var checkStatus = table.checkStatus('detailGrid')
            , data = checkStatus.data;
        //console.log(data[0].iID);
        //var jsonObj = JSON.parse(data);//转换为json对象
        //console.log(jsonObj);
        if (data.length = 0) {
            //配置一个透明的询问框
            layer.msg('当前采购订单信息已为空。', {
                time: 5000, //20s后自动关闭
                btn: ['确认']
            });
            return;
        }

        if (data.length > 1) {
            //配置一个透明的询问框
            layer.msg('请只选择一个要删除的仓库。', {
                time: 5000, //20s后自动关闭
                btn: ['确认']
            });
            return;
        }

        layer.confirm('是否要删除当前所选择的仓库？', {
            btn: ['确认', '取消'] //可以无限个按钮
        }, function (index, layero) {
            var checkStatus = table.checkStatus('warehouseGrid')
                , data = checkStatus.data;
            var ids = [];
            for (var i = 0; i < data.length; i++) {
                ids.push(data[i].iID);
            }

            //按钮【确认】的回调
            $.ajax({
                type: "POST",
                data: JSON.stringify(ids),//"id=" + ids.toString(),
                dataType: "json",
                contentType: 'application/json;charset=utf-8',
                async: false,
                url: "/warehouse/deleteList",
                success: function (msg) {
                    if (msg.code == "0") {
                        table.reload('warehouseGrid', {
                            //url: '/api/table/search'
                            //, where: {} //设定异步数据接口的额外参数
                            //,height: 300
                        });
                    } else {
                        layer.msg('错误号：' + msg.code + ' 错误信息：' + msg.msg, {icon: 2});
                    }
                }
            });
            layer.close(index);
        }, function (index, layro) {
            //按钮【取消】的回调
        });
    });

    $('#btnSave').on('click', function () {
        if ($('#btnSave').hasClass("layui-btn-disabled"))
        {
            return;
        }

        $("#btnAdd").removeClass("layui-btn-disabled");
        $("#btnEdit").removeClass("layui-btn-disabled");
        $("#btnDel").removeClass("layui-btn-disabled");
        $("#btnSave").addClass("layui-btn-disabled");
        $("#btnCancel").addClass("layui-btn-disabled");
        $("#btnAddRow").addClass("layui-btn-disabled");
        $("#btnDelRow").addClass("layui-btn-disabled");
    });

    $('#btnCancel').on('click', function () {
        if ($('#btnCancel').hasClass("layui-btn-disabled"))
        {
            return;
        }

        $("#btnAdd").removeClass("layui-btn-disabled");
        $("#btnEdit").removeClass("layui-btn-disabled");
        $("#btnDel").removeClass("layui-btn-disabled");
        $("#btnSave").addClass("layui-btn-disabled");
        $("#btnCancel").addClass("layui-btn-disabled");
        $("#btnAddRow").addClass("layui-btn-disabled");
        $("#btnDelRow").addClass("layui-btn-disabled");
    });
</script>
</body>
</html>
